<template>
  <section class="guide">
    <section class="countDown" @click="login">
      跳过 ({{countDown}})
    </section>
    <swiper :options="swiperOption" ref="mySwiper">
      <!-- slides -->
      <!-- <swiper-slide v-for="item in items" :key="item.id">
        <img v-bind:src="item.src" alt="" class="swiperImg">
      </swiper-slide> -->
      <swiper-slide>
        <img src="../assets/guide/D.png" alt="" class="swiperImg">
        <img src="../assets/guide/djjr.png" alt="" class="intoBtn" @click="login">
      </swiper-slide>  
    </swiper>
  </section>
</template>
<script>
  import { swiper, swiperSlide } from 'vue-awesome-swiper'
  import { login } from '../libs/interface'
  import { userInfoSet, getUrlData, WXShare } from '../libs/publicMethod'
  export default {
    components: { swiper, swiperSlide, login, userInfoSet, getUrlData, WXShare },
    data () {
      return {
        interVa:'',       
        // 轮播初始化
        swiperOption: {
          autoplay: false,
          initialSlide: 1,
          loop: false,
          pagination: '.swiper-pagination',          
          observer: true,//修改swiper自己或子元素时，自动初始化swiper
          observeParents: true,//修改swiper的父元素时，自动初始化swiper
        },
        countDown: 9,
        // 轮播图
        items: [
          {
            id:0,
            src: 'http://img.zcool.cn/community/0117e2571b8b246ac72538120dd8a4.jpg@1280w_1l_2o_100sh.jpg',
          },
          {
            id:1,
            src: 'http://img.zcool.cn/community/0117e2571b8b246ac72538120dd8a4.jpg@1280w_1l_2o_100sh.jpg',
          },
          {
            id:2,
            src: 'http://img.zcool.cn/community/0117e2571b8b246ac72538120dd8a4.jpg@1280w_1l_2o_100sh.jpg',
          },
          {
            id:3,
            src: 'http://img.zcool.cn/community/0117e2571b8b246ac72538120dd8a4.jpg@1280w_1l_2o_100sh.jpg',
          },
        ]
      }
    },
    mounted(){
      this.interVa = setInterval(()=>{
        this.countDown --
        if (this.countDown<=0) {
          this.login();
          clearInterval(this.interVa)
        }
      },1000)
      WXShare.hideOptionMenu();
    },
    methods: {
      login () {
        let vm = this;
        clearInterval(this.interVa)
        if(!sessionStorage.getItem('historyUrl')){
          vm.$router.replace('/mall');
        }else{
          if(sessionStorage.getItem('historyUrl') =='/wxshare'){            
            vm.$router.replace('/mall');
          } else if(sessionStorage.getItem('historyUrl') == 'null'){        
            vm.$router.replace('/mall');
          } else {
            vm.$router.replace(sessionStorage.getItem('historyUrl'))
          }
        }
        // let params = {
        //   wxCode: getUrlData('code'),
        //   memberID: 0,
        //   inviterID: getUrlData('state').split('#')[0]
        // }
        // login(params, (data)=>{
        //   if (data.code == 1) {
        //     userInfoSet(data.payload); // 把用户信息加入session
        //     if(!sessionStorage.getItem('historyUrl')){
        //       vm.$router.replace('/mall');
        //     }else{
        //       vm.$router.replace(sessionStorage.getItem('historyUrl'))
        //     }
        //   } else {
        //     vm.$toast(data.msg)
        //   }
        // })
      }
    }
  }
</script>
<style scoped>
.guide{
  position: absolute;
  width: 100%;
  height: 100%;
}
.swiperImg{
  width: 100%;
  height: 100%;
}
.guide .swiper-container{  
  width: 100%;
  height: 100%;
}
.intoBtn{
  position:absolute;
  width: 50%;
  bottom:1%;
  left: 25%;
}
.countDown{
  position: fixed;
  top: 10%;
  right: 10%;
  padding: .2rem .8rem;
  text-align: center;
  background-color: red;
  color: white;
  border-radius: 1rem;
  font-size: .8rem;
  z-index: 100;
}
</style>

